<!doctype html>
<html ng-app>
    <head>
        <script src="angular.js"></script>
        <script src="controllers.js"></script>
        <script type="text/javascript">
        function PhoneListCtrl($scope) {
        	  $scope.phones = [
        	    {"name": "Nexus S",
        	     "snippet": "Fast just got faster with Nexus S."},
        	    {"name": "Motorola XOOM™ with Wi-Fi",
        	     "snippet": "The Next, Next Generation tablet."},
        	    {"name": "MOTOROLA XOOM™",
        	     "snippet": "The Next, Next Generation tablet."}
        	  ];
        	}
		function PhoneListCtrl2($scope,$http) {
			$http.get('phones.json').success(function(data) {
				$scope.phones = data;
			});
			$scope.orderProp = 'age';
		}
        </script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        Hello {{yourname || 'World'}}!
        <hr>
        <ul>
		    <li>
		        <span>Nexus S</span>
		        <p>
		        Fast just got faster with Nexus S.
		        </p>
		    </li>
		    <li>
		        <span>Motorola XOOM™ with Wi-Fi</span>
		        <p>
		        The Next, Next Generation tablet.
		        </p>
		    </li>
		</ul>
		<hr>
		<div ng-controller="PhoneListCtrl">
		  <ul>
		    <li ng-repeat="phone in phones">
		      {{phone.name}}
		    <p>{{phone.snippet}}</p>
		    </li>
		  </ul>
		  </div>
		  <hr>
		<div ng-controller="PhoneListCtrl2">
		  <ul>
		    <li ng-repeat="phone in phones">
		      {{phone.name}}
		    <p>{{phone.snippet}}{{phone.age}}</p>
		    </li>
		  </ul>
		  </div>
    </body>
</html>